<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<title>首页</title>
	<script src="plugins/common/common-js.js" type="text/javascript"></script>
	<script src="plugins/js/jquery-3.4.1.min.js" type="text/javascript"></script>
	<script src="plugins/js/echarts.min.js"></script>
	<link rel="stylesheet" href="css/index.css">
</head>

<body>
	<div id="app" v-cloak>
		<el-container>
			<el-header height="70px">
				<el-row type="flex" justify="center">
					<el-col :span="7">
						<span>欢迎使用传染病接触自查系统，身份证为:</span>
					</el-col>
					<el-col :span="4">
						<span>{{ this.userCookie.idCard }}</span>
					</el-col>
					<el-col :span="2">
						<span>的用户</span>
					</el-col>

				</el-row>
				<el-row type="flex" v-show="vshow.userShow">
					<el-col :span="4" :offset="21">
						<el-button icon="el-icon-delete" circle @click="clearUser()"></el-button>
						<span>清除个人信息</span>
					</el-col>
				</el-row>
			</el-header>
		</el-container>
		<el-container>
			<el-aside style="width:200px; background-color:#545c64">
				<el-menu style="width:100%;" default-active="index" class="el-menu-vertical-demo"
					background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" @select="selectPage">
					<el-menu-item index="index">
						<i class="el-icon-location"></i>
						<span slot="title">首页</span>
					</el-menu-item>
					<el-menu-item index="userMsg">
						<i class="el-icon-setting"></i>
						<span slot="title">完善个人信息</span>
					</el-menu-item>
					<el-menu-item index="3">
						<i class="el-icon-document"></i>
						<span slot="title">求助</span>
					</el-menu-item>
					<el-menu-item index="userArea">
						<i class="el-icon-menu"></i>
						<span slot="title">疫情期间去过的地区</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main v-loading="vshow.loading">
				<el-row type="flex" justify="center" v-show="vshow.showButton">
					<el-form :inline="true" :model="user" ref="user" :rules="rules" label-width="80px">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="user.name"></el-input>
						</el-form-item>
						<el-form-item label="身份证" prop="idCard">
							<el-input v-model="user.idCard"></el-input>
						</el-form-item>
						<el-form-item>
							<el-button icon="el-icon-search" circle @click="searchMsg('user')"></el-button>
						</el-form-item>
					</el-form>
				</el-row>
				<el-row v-show="vshow.showMsg">
					<el-col :span="10" :offset="7">
						<span style="color: red;">
							根据您曾接触过的人员情况，系统计算出您感染病毒的概率为{{this.userCookie.grgl}},此概率仅供参考不一定准确。
						</span>
					</el-col>
					<el-col :span="10" :offset="7">
						<span style="color: red;">
							以下是系统内，您曾主动接触或被动接触过的所有人员的信息。
						</span>
					</el-col>
				</el-row>
				<el-row v-show="vshow.showMsg">
					<el-col :span="16" :offset="4">
						<el-table stripe :data="personTable">
							<el-table-column label="接触方式" width="125" :show-overflow-tooltip='false' prop="contactType">
							</el-table-column>
							<el-table-column label="姓名" width="100" :show-overflow-tooltip='true' prop="name">
							</el-table-column>
							<el-table-column label="居住地址" width="165" :show-overflow-tooltip='true' prop="address">
							</el-table-column>
							<el-table-column label="此人感染概率" width="125" :show-overflow-tooltip='true' prop="grgl">
							</el-table-column>
							<el-table-column label="接触时间" width="149" :show-overflow-tooltip='true' prop="contactTime">
							</el-table-column>
							<el-table-column label="接触类型" width="125" :show-overflow-tooltip='true' prop="contactName">
							</el-table-column>
						</el-table>
					</el-col>

				</el-row>
				<el-row>
					<el-col :span="8" :offset="8" style="margin-bottom: 10px;margin-top: 10px;">
						<span style="color: red;">
							以下是有确诊感染者去过的地区。
						</span>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="3" :offset="4">
						<span>
							时间筛选：
						</span>
					</el-col>

					<el-col :span="6">
						<el-date-picker v-model="cxAreaTj.startTime" format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择到达地区时刻"
							@change="cxAreaChange">
						</el-date-picker>
					</el-col>
					<el-col :span="6">
						<el-date-picker v-model="cxAreaTj.endTime" format="yyyy-MM-dd HH:mm"
							value-format="yyyy-MM-dd HH:mm" type="datetime" placeholder="选择离开地区时刻"
							@change="cxAreaChange">
						</el-date-picker>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="16" :offset="4">
						<el-table stripe :data="areaDataTable" max-height="500">
							<el-table-column label="地点" width="150" :show-overflow-tooltip='true' prop="xqAddress">
							</el-table-column>
							<el-table-column label="城市" width="150" :show-overflow-tooltip='true' prop="addressName">
							</el-table-column>
							<el-table-column label="到达时刻" width="150" :show-overflow-tooltip='true' prop="reachTime">
							</el-table-column>
							<el-table-column label="离开时刻" width="150" :show-overflow-tooltip='true' prop="leaveTime">
							</el-table-column>
							<el-table-column>
								<template slot="header" slot-scope="scope">
									<el-input v-model="cxAreaTj.address" @change="cxAreaChange" size="mini"
										placeholder="城市搜索" />
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="8" :offset="8" style="margin-bottom: 10px;margin-top: 10px;">
						<span style="color: red;">
							输入车次号，查询您乘坐的列车是否有确诊患者上车。
						</span>
					</el-col>
				</el-row>
				<el-row justify="center" type="flex">
					<el-col :span="16">
						<el-table stripe :data="trafficDataTable">


							<el-table-column label="车次" width="60" :show-overflow-tooltip='false' prop="trainNumber">
								<template slot-scope="scope">
									<el-popover trigger="hover" placement="top">
										<p>起 点：{{scope.row.startCity}}</p>
										<p>终 点: {{ scope.row.endCity }}</p>
										<div slot="reference" class="name-wrapper">
											<el-tag size="medium">{{ scope.row.trainNumber }}</el-tag>
										</div>
									</el-popover>
								</template>
							</el-table-column>
							<el-table-column label="上车车站" width="110" :show-overflow-tooltip='true' prop="startStation">
							</el-table-column>
							<el-table-column label="下车车站" width="110" :show-overflow-tooltip='true' prop="endStation">
							</el-table-column>
							<el-table-column label="上车时间" width="160" :show-overflow-tooltip='true' prop="startTime">
							</el-table-column>
							<el-table-column label="下车时间" width="160" :show-overflow-tooltip='true' prop="endTime">
							</el-table-column>
							<el-table-column>
								<template slot="header" slot-scope="scope">
									<el-input id="fd-trainsearch-input" v-model="cxTraffic.trainNumber"
										@change="cxTrafficChange" size="mini" placeholder="车次搜索" />
								</template>
							</el-table-column>
						</el-table>
			
			
						<el-pagination background layout="prev, pager, next" :total="countNum.trafficCount"
							:page-size="pagesize" @current-change="handleTrafficCurrentChange">
						</el-pagination>
					</el-col>
				</el-row>
				<el-row style="margin-top: 20px;">
					<el-col :span="16" :offset="4">
						<div id="box" style="width: 100%;height: 600px;"></div>
					</el-col>
				</el-row>
				<el-row justify="center" type="flex">
					<el-col :span="16">
						<el-table stripe :data="riskAnalysisDataTable">

							<el-table-column label="风险程度" width="80" :show-overflow-tooltip='true' prop="fx">
							</el-table-column>
							<el-table-column label="省" width="90" :show-overflow-tooltip='true' prop="province">
							</el-table-column>
							<el-table-column label="市" width="90" :show-overflow-tooltip='true' prop="city">
							</el-table-column>
							<el-table-column label="县/区" width="90" :show-overflow-tooltip='true' prop="area">
							</el-table-column>
							<el-table-column label="目前确诊" width="100" :show-overflow-tooltip='true' prop="qznum">
							</el-table-column>
							<el-table-column label="目前高风险" width="100" :show-overflow-tooltip='true' prop="gfxnum">
							</el-table-column>
							<el-table-column label="目前治愈" width="100" :show-overflow-tooltip='true' prop="zynum">
							</el-table-column>
							<el-table-column>
								<template slot="header" slot-scope="scope">
									<el-input id="fd-trainsearch-input" v-model="cxRiskAnalysis"
										@change="cxRiskAnalysisChange" size="mini" placeholder="搜索" />
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
	</div>

	<script src="js/index.js" type="text/javascript"></script>
</body>


</html>